<script lang="ts">
import { ElNotification } from 'element-plus'
import { defineComponent, h, reactive, watch } from 'vue'
export default defineComponent({
    name: 'JxtechUploadDialog'
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'changeUnit', data: any): void
    (e: 'btnClose', val: boolean): void,
    (e: 'upload-success', _response: any, _file: any, _fileList: any): void//上传成功触发事件
    (e: 'upload-error', _response: any, _file: any, _fileList: any): void//上传失败触发事件
    (e: 'upload-preview', _file: any): void//点击预览
    (e: 'upload-remove', _file: any, _fileList: any): void//移除触发事件
}>()

const props = defineProps({
    /**是否显示 */
    visible: {
        type: Boolean,
        default: false
    },
    // 必填
    itemType: {
        type: String,
        require: true
    },

    // 必填
    busiId: {
        type: String,
        require: true
    },
    // 必填
    compId: {
        type: String,
        require: true
    },
    // 必填
    projectid: {
        type: [String, Number],
        require: true
    },
    parentid: {
        type: String,
        retuire: true
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false
    },
    // 支持发送cookie凭证信息
    withCredentials: {
        type: Boolean,
        default: false
    },
    // 支持上传文件类型 （thumbnail-mode 模式下此参数无效）
    accept: {
        type: String,
        default: 'txt,png,ppt,pptx,doc,docx,war,zip,bmp,gif,jpg,jpeg,xls,xlsx,pdf,mov,mp4,json,tif,dwg'
    },
    // 是否显示缩略图 
    thumbnailMode: {
        type: Boolean,
        default: false
    },
    // 最大上传数量 (files, fileList)
    limit: {
        type: Number
    }
})
//设置是否显示双向绑定
const visibleModelValue = ref(props.visible)
watch(() => props.visible, val => {
    visibleModelValue.value = val
})
watch(visibleModelValue, val => {
    emit("update:visible", val)
})
const handleClose = () => {
    emit("update:visible", false)
}
const uploadSuccess = (_response: any, _file: any, _fileList: any) => {
    if (props.limit == 1) handleClose()
    emit("upload-success", _response, _file, _fileList)
}
const uploadError = (_response: any, _file: any, _fileList: any) => {
    emit("upload-error", _response, _file, _fileList)
}
const uploadPreview = (_file: any,) => {
    emit("upload-preview", _file)
    console.log(_file)
}
const uploadRemove = (_file: any, _fileList: any): void => {
    emit("upload-remove", _file, _fileList)
}

</script>
<template>
    <el-dialog
        v-model="visibleModelValue"
        title="上传文件"
        width="1000px"
        :before-close="handleClose"
        destroy-on-close
    >
        <jxtech-upload
            :itemType="props.itemType"
            :busiId="props.busiId"
            :compId="props.compId"
            :projectid="props.projectid"
            :parentid="props.parentid"
            :accept="props.accept"
            :limit="props.limit"
            @upload-success="uploadSuccess"
            @upload-error="uploadError"
            @upload-preview="uploadPreview"
            @upload-remove="uploadRemove"
        ></jxtech-upload>
    </el-dialog>
</template>
<style lang="scss" scoped>
</style>